<template>
  <div class="category">
    <n-space>
      <n-button type="info" @click="handleAdd">添加</n-button>
    </n-space>
    <br/>
    <n-data-table
      size="small"
      :columns="columns"
      :data="data"
      :indent="24"
      :row-key="rowKey"
      :sticky-expanded-rows="true"
      :virtual-scroll="true"
      max-height="750px"
    ></n-data-table>
    <CategoryModal ref="modal" @list="getList"></CategoryModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "category"
}
</script>

<script setup lang="ts">
import {onMounted, ref, h} from "vue"
import CategoryModal from '@/view/shopping/category/categoryModal.vue'
import {ums_category_delete, ums_category_treeList} from '@/api/sms'
import {categoryColumns, categoryListType} from '@/view/shopping/category/category'
import {NButton, NSpace} from 'naive-ui'
import useMsg from '@/hooks/useMsg'

const {success, error} = useMsg()

const columns = categoryColumns(row)

const modal = ref<{
  init: (data?: categoryListType) => void
}>()

const rowKey = (row:categoryListType) => row.category_id

const data = ref([])

const handleAdd = () => {
  modal.value?.init()
}

function getList () {
  ums_category_treeList().then(res => {
    if (res.code === 200) {
      data.value = res.data
    }
  })
}

function row (r:categoryListType) {
  return h(NSpace, {}, [
    h(NButton, {
      type: "info",
      onclick: () => {
        modal.value?.init(r)
      }
    }, "编辑"),
    h(NButton, {
      type: "error",
      onclick: () => {
        ums_category_delete({
          category_id: r.category_id
        }).then(res => {
          if (res.code === 200) {
            success(res.message)
            getList()
          }else {
            error(res.message)
          }
        }).catch(err => {
          error(err.message)
        })
      }
    }, "删除")
  ])
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
